<script setup>
import {ref} from "vue";

const content = ref('');
const editorConfig = ref({
  // UEditorPlus 的根目录，绝对路径。
  UEDITOR_HOME_URL: '/UEditorPlus/',
  // UEditorPlus 的跨域根目录，绝对路径。
  UEDITOR_CORS_URL: '/UEditorPlus/',
  // 设置编辑器自动获得焦点
  focus: true,
  // 设置编辑器宽度为100%
  initialFrameWidth: '100%',
});

const setContent = () => {
  content.value = '<p>这是初始内容:<span style="color:red;font-size:18px;">Hello World</span></p>';
};
</script>

<template>
  <div>
    <vue-ueditor-wrap v-model="content"
                      editor-id="editor"
                      :config="editorConfig"
                      :editorDependencies="['ueditor.config.js','ueditor.all.js']"/>
    <div>
      <el-button @click="setContent">设置内容</el-button>
    </div>
    <div>
      <span v-html="content"></span>
    </div>
  </div>
</template>

<style scoped>
</style>